import 'package:hooks_riverpod/hooks_riverpod.dart';
import 'package:sleep/comp/card_back_ground.dart';
import 'package:sleep/comp/detail_chart.dart';
import 'package:sleep/comp/home_bottom.dart';
import 'package:sleep/comp/sleep_state_chart.dart';
import 'package:sleep/help_style.dart';
import 'package:sleep/page/sleep/comp/detail_appbar.dart';
import 'package:sleep/page/sleep/comp/detail_sleep.dart';
import 'package:sleep/provider/sleep_state_provider.dart';
import 'package:sleep/provider/turn_over_provider.dart';
import 'package:sleep/provider/wave_deatil_provider/pluse_detail_provider.dart';
import 'package:sleep/provider/wave_deatil_provider/sleep_detail_provider.dart';
import 'package:sleep/config.dart';
import 'package:fl_chart/fl_chart.dart';
import 'package:flutter/material.dart';

class DetailPage extends ConsumerWidget {
  const DetailPage({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context, ref) {
    final heigh = MediaQuery.of(context).padding.top;
    final sleep = ref.watch(sleepDetailProvider);
    final pulse = ref.watch(pulseDetailProvider);
    final spots = ref.watch(sleeptateProvider)?.sleeppot;
    final turnOver = ref.watch(turnOverProvider);
    return Scaffold(
      backgroundColor: HelpStyle.backgroundColor,
      body: Padding(
        padding: const EdgeInsets.only(left: 12.0, right: 12.0),
        child: Column(
          children: [
            Expanded(
              child: CustomScrollView(
                slivers: [
                  SliverPersistentHeader(
                    delegate: DetailAppbar(
                        heigh + kBottomNavigationBarHeight, 'Detail', "12"),
                    pinned: true,
                  ),
                  const SliverToBoxAdapter(child: DetailSleep()),
                  const SliverToBoxAdapter(child: SizedBox(height: 10)),
                  const SliverToBoxAdapter(child: HomeBottom()),
                  const SliverToBoxAdapter(child: SizedBox(height: 10)),
                  SliverToBoxAdapter(
                      child: chart('RR', 0, 60, 20, 0, spot: sleep.prSpots)),
                  SliverToBoxAdapter(
                      child: chart('AT', 0, 20, 5, 0, spot: sleep.atSpots)),
                  SliverToBoxAdapter(
                      child:
                          chart('HRV', 0, 0.15, 0.05, 2, spot: pulse.hrvSpots)),
                  SliverToBoxAdapter(
                      child: chart('SI', 0, 4, 2, 1, spot: pulse.siSpots)),
                  SliverToBoxAdapter(
                      child: chart('PWV', 0, 9, 3, 1, spot: pulse.pwvSpots)),
                  SliverToBoxAdapter(
                      child:
                          chart('BPM', 30, 150, 30, 0, spot: pulse.bpmSpots)),
                  SliverToBoxAdapter(
                      child: chart('HT', 0, 1000, 250, 0,
                          spot: sleep.htSpots, x: 3000)),
                  SliverToBoxAdapter(
                      child: chart('Turn Over', 0, 60, 20, 0,
                          x: 2 * 60 * 60, spot: turnOver.turnOverSpots)),
                  SliverToBoxAdapter(child: sleepsatechart(spots)),
                ],
              ),
            ),
          ],
        ),
      ),
    );
  }

  Widget headerItem(_DeatilModel model) {
    return CustomPaint(
      painter: BackPainter(),
      child: Container(
        child: Column(
          children: [Text(model.title), Text(model.value)],
        ),
      ),
    );
  }

  Widget chart(
      String title, double? minY, double? maxY, double mimResolution, fixed,
      {List<FlSpot>? spot, int? x}) {
    return Container(
      margin: EdgeInsets.fromLTRB(0, 4, 0, 4),
      padding: EdgeInsets.only(top: 12, left: 12, bottom: 12, right: 12),
      decoration: HelpStyle.decoration,
      child: Column(
        crossAxisAlignment: CrossAxisAlignment.start,
        children: [
          Text(
            title,
            style: HelpStyle.contextStyle,
          ),
          const SizedBox(height: 8),
          DetailChart(
              fixed: fixed,
              aspectRatio: 4,
              spots: spot,
              mimResolution: mimResolution,
              minX: 0,
              maxX: x?.toDouble() ?? (kDetialShowLengh.toDouble()),
              maxY: maxY,
              minY: minY)
        ],
      ),
    );
  }

  Widget sleepsatechart(List<List<FlSpot>>? spots) {
    return Container(
      margin: EdgeInsets.fromLTRB(0, 4, 0, 4),
      padding: EdgeInsets.only(top: 12, left: 12, bottom: 12, right: 12),
      decoration: HelpStyle.decoration,
      child: Column(
        crossAxisAlignment: CrossAxisAlignment.start,
        children: [
          Text(
            'Sleep State',
            style: HelpStyle.contextStyle,
          ),
          const SizedBox(height: 8),
          SleepStateChart(
              aspectRatio: 4,
              spots: spots,
              mimResolution: 1,
              minX: 0,
              maxX: 8 * 60 * 60.toDouble(),
              maxY: 2,
              minY: 0)
        ],
      ),
    );
  }
}

class _DeatilModel {
  final String title;
  final String value;

  _DeatilModel(this.title, this.value);
}
